<template>
	<view class="topDiv">
		<view v-if="loginData.userName!=null">
			<u-row gutter="16">
				<u-col span="12">
					<h1 class="topDiv-title">Hi,{{ loginData.userName }}</h1>
					<h5 class="topDiv-subtitle">欢迎来到校园服务平台app</h5>
					<!-- <view class="t-icon t-icon-aixin"></view> -->
				</u-col>
				<u-col span="4" class="qdDiv">
					<u-button size="mini" shape="circle" type="warning">签到</u-button>
				</u-col>
			</u-row>
		</view>
		<!-- 未登录时 -->
		<view style="width: 100%;" v-else>
			<u-button @click="doLogin" size="medium" shape="circle" type="success">点击微信登录</u-button>
		</view>
		<!-- 快捷功能菜单 -->
		<view class="fastNav">
			<u-row gutter="12" justify="space-between">
				<u-col span="4">
					<view class="navDiv">
						<u-icon @click="doScan" name="scan" size="50" label-color="rgb(43,109,166)"
							color="rgb(43,109,166)" label="扫码" label-pos="bottom"></u-icon>
					</view>
				</u-col>
				<u-col span="4" class="navDiv">
					<view class="navDiv">
						<u-icon @click="openSxt" name="coupon-fill" size="50" label-color="rgb(43,109,166)"
							color="rgb(43,109,166)" label="付款码" label-pos="bottom"></u-icon>
					</view>
				</u-col>
				<u-col span="4" class="navDiv">
					<view class="navDiv">
						<u-icon name="red-packet" size="50" label-color="rgb(43,109,166)" color="rgb(43,109,166)"
							label="充值" label-pos="bottom"></u-icon>
					</view>
				</u-col>
			</u-row>
		</view>

		<!-- 下方元素 -->
		<view class="contentDiv">
			<!-- 通知div -->
			<view class="noticeDiv">
				<u-notice-bar mode="vertical" :duration="1500" :list="msgList"></u-notice-bar>
			</view>

			<!-- 菜单栏 -->
			<u-grid :col="4">
				<u-grid-item v-for="(item,index) in navData" :key="index">
					<view :class="'t-icon t-'+item.icon"></view>
					<text class="iconTitle">{{ item.title }}</text>
				</u-grid-item>
			</u-grid>

		</view>

	</view>


</template>

<script>
	export default {
		name: "home",
		data() {
			return {
				// 登录用户信息
				loginData: {
					userName: "测试微信用户"
					//userName:null
				},
				// 滚动消息
				msgList: [
					"你........",
					"我......."
				],
				// 菜单栏信息
				navData: [{
						icon: "icon-aixin",
						title: "健康打卡"
					},
					{
						icon: "icon-shouji",
						title: "话费充值"
					}, {
						icon: "icon-dushu",
						title: "学生兼职"
					}, {
						icon: "icon-guaichiyao",
						title: "健康助手"
					}, {
						icon: "icon-biaoqian",
						title: "水电缴费"
					}, {
						icon: "icon-rili",
						title: "学校介绍"
					}, {
						icon: "icon-xinxi",
						title: "通知公告"
					}, {
						icon: "icon-shoucang",
						title: "全部应用"
					}
				]
			}
		},
		methods: {
			// 进行微信认证登录
			doLogin() {
				let _this = this;
				uni.getUserProfile({
					desc: "获取微信信息进行登录",
					success(res) {
						_this.loginData.userName = res.userInfo.nickName;
					}
				});
			},
			// 扫码功能
			doScan() {
				uni.scanCode({
					success: function(res) {
						console.log('条码类型：' + res.scanType);
						console.log('条码内容：' + res.result);
					}
				});
			},
			// 打开摄像头
			openSxt() {
				var img = null;
				uni.chooseImage({
					count: 1,
					sourceType: ['camera'],
					success(res) {
						img = res;
					}
				});

				console.dir(img);
			}
		}
	}
</script>

<style scoped>
	.topDiv {
		width: 100vw;
		height: 370upx;
		background: linear-gradient(180deg, rgb(51, 134, 255), #FFF);
		display: flex;
		align-items: center;
		padding-left: 25px;
		padding-right: 25px;
		box-sizing: border-box;
		position: relative;
	}

	.fastNav {
		width: 90vw;
		height: 200upx;
		background-color: white;
		border-radius: 25upx;
		position: absolute;
		top: 250upx;
		left: 35upx;
		box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
		box-sizing: border-box;
	}

	.topDiv-title {
		font-size: 35upx;
		color: #FFF;
		margin-bottom: 10upx;
	}

	.topDiv-subtitle {
		font-size: 25upx;
		color: #FFF;
	}

	.qdDiv {
		display: flex;
		justify-content: flex-end;
	}

	.navDiv {
		display: flex;
		justify-content: center;
		align-items: center;
		height: 100%;
		box-sizing: border-box;
		padding-top: 33upx;
	}

	.contentDiv {
		position: absolute;
		width: 100vw;
		height: 1000upx;
		top: 500upx;
		left: 0px;
	}

	.noticeDiv {
		width: 100vw;
		height: 100upx;

	}
</style>